<template>
    <div
        style="display: flex;flex-direction: column;height: 100%;width: 100%;background-color: white;border-radius: 10px;align-items: center;">
        <div
            style="display: flex;flex-direction: column;background-color: #F6F7FB;border-radius: 10px;width: 99%;margin: 20px 0;align-items: flex-start;">
            <el-button style="margin: 10px;" @click="addDevice">添加人脸识别设备</el-button>
            <div style="width: 100%;" v-for="item in devicesArr">
                <div style="display: flex;width: 100%;align-items: center;margin: 10px;">
                    <div style="width: 150px;text-align: left;">
                        人脸匹配程度
                    </div>
                    <el-select v-model="item.faceMatch" placeholder="请选择" @change="changeInput(item)">
                        <el-option v-for="item in faceMatchArr" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import request from "../axios/request";
export default {
    data() {
        return {
            faceMatchArr: [{
                value: 10,
                label: '10%'
            }, {
                value: 20,
                label: '20%'
            }, {
                value: 30,
                label: '30%'
            }, {
                value: 40,
                label: '40%'
            },{
                value: 50,
                label: '50%'
            }, {
                value: 60,
                label: '60%'
            }, {
                value: 70,
                label: '70%'
            }, {
                value: 80,
                label: '80%'
            }, {
                value: 90,
                label: '90%'
            }],
            devicesArr:[]
        }
    },
    methods: {
        async getDeviceList() {
            let resOfGettingDeviceList = await request({
                url: "/api/faceDevice/getDevicesList",
                method: "GET"
            });
            if (resOfGettingDeviceList.data.status == 200) {
                this.devicesArr = resOfGettingDeviceList.data.data
            }
        },
        async addDevice() {
            let resOfAddNewDevice = await request({
                url: "/api/faceDevice/addNewDevice",
                method: "GET"
            });
            if (resOfAddNewDevice.data.status == 200) {
                this.getDeviceList()
            }
        },
        async changeInput(item) {
            await request({
                url: "/api/faceDevice/update",
                method: "POST",
                data: item
            });
        }
    },
    mounted() {
        this.getDeviceList()
        navigator.mediaDevices.enumerateDevices()
			.then(function(devices) {
				console.log(devices)
				devices.forEach(function(device) {
					if(device.kind == 'videoinput'){
                        videoArr.push({
                            'label': device.label,
                            'id': device.deviceId
						})
					}
				});
				return videoArr;
 
			})
			.catch(function(err) {
				// layer.msg(err.name + ": " + err.message);
			});
    }
}
</script>

<style scoped></style>